<template>
  <a-drawer
    :title="title"
    :maskClosable="true"
    class="pad_0"
    width="700"
    placement="right"
    :closable="true"
    @close="close"
    :visible="visible"
    style="overflow: auto; padding-bottom: 53px; height: 100%"
  >
    <a-row class="row_box">
      <a-col :md="24" :sm="24" class="equipment-boundary-botton">
        <a-button type="primary" @click="zidingyi()">自定义排放过程</a-button>
        <a-button type="primary" @click="handleSelectBoundartModal"
          >已绑定边界</a-button
        >
      </a-col>
      <a-col :md="10" :sm="10" class="equipment-boundary-industry">
        <p class="equipment-boundary-industry-title">所属行业</p>
        <ul class="equipment-boundary-industry-list">
          <li
            :class="[industryId == item.id ? 'active' : '']"
            v-for="(item, index) in industryData"
            :key="index"
            @click="selectIndustry(item)"
          >
            {{ item.industryName }}
          </li>
        </ul>
      </a-col>
      <a-col :md="12" :sm="12">
        <p class="equipment-boundary-industry-title">
          排放过程<span style="font-size: 12px; font-weight: 400; color: #666"
            >(勾选核算边界与当前设施绑定)</span
          >
        </p>
        <a-form style="padding-left: 20px; heigt: 100%; overflow-y: auto">
          <a-form-item label="">
            <a-tree
              checkable
              @check="onCheck"
              :checkedKeys="checkedKeys"
              :treeData="treeData"
              @expand="onExpand"
              @select="onTreeNodeSelect"
              :selectedKeys="selectedKeys"
              :expandedKeys="expandedKeysss"
              :checkStrictly="checkStrictly"
            >
              <span slot="custom" slot-scope="{ boundaryName }">
                {{ boundaryName }}
              </span>
            </a-tree>
          </a-form-item>
        </a-form>
      </a-col>
    </a-row>
    <div class="drawer-bootom-button">
      <a-dropdown
        style="float: left"
        :trigger="['click']"
        placement="topCenter"
      >
        <a-menu slot="overlay">
          <!-- <a-menu-item key="1" @click="switchCheckStrictly(1)"
                >父子关联</a-menu-item
              >
              <a-menu-item key="2" @click="switchCheckStrictly(2)"
                >取消关联</a-menu-item
              > -->
          <a-menu-item key="3" @click="checkALL">全部勾选</a-menu-item>
          <a-menu-item key="4" @click="cancelCheckALL">取消全选</a-menu-item>
          <a-menu-item key="5" @click="expandAll">展开所有</a-menu-item>
          <a-menu-item key="6" @click="closeAll">合并所有</a-menu-item>
        </a-menu>
        <a-button> 树操作 <a-icon type="up" /> </a-button>
      </a-dropdown>
      <a-popconfirm
        title="确定放弃编辑？"
        @confirm="close"
        okText="确定"
        cancelText="取消"
      >
        <a-button style="margin-right: 0.8rem">取消</a-button>
      </a-popconfirm>

      <a-button @click="handleSubmit(true)" type="primary" :loading="loading"
        >保存并关闭</a-button
      >
    </div>
    <select-industry-Modal
      ref="selectIndustryModal"
      @selectFinished="selectOK"
    ></select-industry-Modal>
    <!-- <boundary-entry-modal ref="datarule"></boundary-entry-modal> -->
  </a-drawer>
</template>
<script>
import {
  queryTreeListForRole,
  queryRolePermission,
  saveRolePermission,
  getAccountingIndustry,
  getAccountingBoundary,
  saveFacilitiesBoundary,
  queryBindingBoundaryByIndustry,
} from "@/api/api";
import BoundaryEntryModal from "../Boundary/BoundaryEntryModal.vue";
import SelectIndustryModal from "./SelectIndustryModal.vue";
import { ListMixin } from "@/mixins/ListMixin";
export default {
  name: "RoleModal",
  mixins: [ListMixin],
  components: {
    SelectIndustryModal,
    BoundaryEntryModal,
  },
  data() {
    return {
      facilitiesId: null,
      industryId: null,
      industryData: [],
      roleId: "",
      active: 1,
      treeData: [],
      defaultCheckedKeys: [],
      checkedKeys: [],
      expandedKeysss: [],
      allTreeKeys: [],
      autoExpandParent: true,
      checkStrictly: false,
      title: "排放过程",
      visible: false,
      loading: false,
      selectedKeys: [],
    };
  },
  methods: {
    selectOK() {},
    handleSelectBoundartModal() {
      this.$refs.selectIndustryModal.show(this.facilitiesId);
    },
    selectIndustry(item) {
      this.industryId = item.id;
      // this.loadData();
      this.loadDataBoundary()
    },
    zidingyi() {
      this.$notification.success({
        message: "提示",
        description: `正在开发中。`,
      });
    },
    onTreeNodeSelect(id) {
      if (id && id.length > 0) {
        this.selectedKeys = id;
      }
      this.$refs.datarule.show();
    },
    onCheck(o, e) {
      if (this.checkStrictly) {
        this.checkedKeys = o.checked;
      } else {
        this.checkedKeys = o;
      }
    },
    show(facilities) {
      this.facilitiesId = facilities.id;
      //   this.roleId = roleId;
      this.visible = true;
    },
    close() {
      this.reset();
      this.$emit("close");
      this.visible = false;
    },
    onExpand(expandedKeys) {
      this.expandedKeysss = expandedKeys;
      this.autoExpandParent = false;
    },
    reset() {
      this.expandedKeysss = [];
      this.checkedKeys = [];
      this.defaultCheckedKeys = [];
      this.loading = false;
    },
    expandAll() {
      this.expandedKeysss = this.allTreeKeys;
    },
    closeAll() {
      this.expandedKeysss = [];
    },
    checkALL() {
      this.checkedKeys = this.allTreeKeys;
    },
    cancelCheckALL() {
      //this.checkedKeys = this.defaultCheckedKeys
      this.checkedKeys = [];
    },
    switchCheckStrictly(v) {
      if (v == 1) {
        this.checkStrictly = false;
      } else if (v == 2) {
        this.checkStrictly = true;
      }
    },
    handleCancel() {
      this.close();
    },
    handleSubmit(exit) {
      // 取交集
      let intersection = this.checkedKeys.filter((val) => {
        return this.allTreeKeys.indexOf(val) > -1;
      });
      var boundaryIds = intersection.join(",");
      let params = {
        facilitiesId: this.facilitiesId,
        boundaryIds: boundaryIds,
        industryId: this.industryId,
      };

      let that = this;
      that.loading = true;
      saveFacilitiesBoundary(params).then((res) => {
        if (res.success) {
          that.$message.success(res.message);
          that.$emit("ok2");
          that.loading = false;
          if (exit) {
            that.close();
          }
        } else {
          that.$message.error(res.message);
          that.loading = false;
          if (exit) {
            that.close();
          }
        }
        this.loadDataBoundary();
      });
    },
    treeForeach(tree, func) {
      tree.forEach((data) => {
        data.scopedSlots = { title: "custom" };
        func(data);
        data.children && this.treeForeach(data.children, func);
      });
    },

    loadDataBoundary() {
      getAccountingBoundary({
        industryId: this.industryId,
        facilitiesId: this.facilitiesId,
      }).then((data) => {
        //   console.log(data);
        this.treeData = data.result;
        var treeIds = [];

        this.treeForeach(this.treeData, (node) => {
          if (node.hasChild == 0) {
            treeIds.push(node.key);
          }
        });
        //   console.log(this.treeData, treeIds);
        queryBindingBoundaryByIndustry({
          industryId: this.industryId,
          facilitiesId: this.facilitiesId,
        }).then((res) => {
          var checkedArr = [];
          if (res.result.length > 0) {
            res.result.forEach((item) => {
              checkedArr.push(item.boundaryId);
            });
          }

          this.checkedKeys = checkedArr;
          //   console.log(this.checkedKeys);
        });

        this.allTreeKeys = treeIds;
      });

      //   queryTreeListForRole().then((res) => {
      //       this.treeData = res.result.treeList;
      //       this.allTreeKeys = res.result.ids;
      //     //   console.log(res);
      //       queryRolePermission({ roleId: this.roleId }).then((res) => {
      //         this.checkedKeys = [...res.result];
      //         this.defaultCheckedKeys = [...res.result];
      //         this.expandedKeysss = this.allTreeKeys;
      //         //   console.log(this.defaultCheckedKeys);
      //       });
      //   });
    },
  },
  watch: {
    visible() {
      if (this.visible) {
        // 加载行业
        getAccountingIndustry().then((res) => {
          this.industryData = res.result;
          this.industryId = this.industryData[0].id;
          this.loadDataBoundary();
        });
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.drawer-bootom-button {
  position: absolute;
  bottom: 0;
  width: 100%;
  border-top: 1px solid #e8e8e8;
  padding: 10px 16px;
  text-align: right;
  left: 0;
  background: #fff;
  border-radius: 0 0 2px 2px;
}
.equipment-boundary-botton {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  border-bottom: 1px solid #e8e8e8;
  padding-bottom: 8px;
}
.equipment-boundary-industry {
  border-right: 1px solid #e8e8e8;

  .equipment-boundary-industry-list {
    height: calc(100% - 500px);
    overflow-y: auto;
    li {
      line-height: 26px;
      font-size: 12px;
      padding-left: 20px;
      &:hover {
        background: #e8e8e8;
      }
    }

    .active {
      background: #006eff !important;
      color: #fff !important;
    }
  }
}
.equipment-boundary-industry-title {
  border-bottom: 1px solid #e8e8e8;
  padding-left: 10px;
  line-height: 36px;
  font-size: 14px;
  font-weight: 600;
  color: #333;
  margin-bottom: 0;
}
.row_box {
  height: calc(100%);
  overflow-y: auto;
}
</style>